import siteHeader from "./siteHeader.js";
import backTop    from "./backTop.js";
import Register from "./register.js";

function Login(){}

$.extend( Login.prototype , {
    init :function(){
        console.log("i am login");
        this.form           = $(".form-horizontal");
        this.login_name     = $("#input_username");
        this.login_password = $("#input_password");
        this.btn            = $("#btn");
        this.input_vcode    = $("#input_vcode");
        //立即注册
        this.btn_warning     = $(".btn-warning");
        //验证码
        this.btn_link       = $(".btn-link");
        this.random_code    = $(".random-code");
        //验证码错误提示
        this.alert_danger   = $(".alert-danger");
        //绑定事件
        this.btn_link.on("click",$.proxy(this.randomVerCode,this));
        this.btn.on("click"  ,$.proxy(this.checkRandomVerCode,this));
        this.form.on("submit",$.proxy(this.submitForm,this));   
        //跳转到登录页面
        this.btn_warning.on("click",$.proxy(this.goBackRegister,this));
        siteHeader.init();
        backTop.init();
    },
    randomVerCode : function(){
        var arrayTest= ["m","n","v","x","z","a","b","c","d","e","f","g","h","j","k","l","q","w","r","t","y","u","i","i","o","p",1,2,3,4,5,6,7,8,9,0];
        var str = "";
        for(var i=0;i<4;i++){
            //parseInt()函数将Math.random()函数中随机出的值乘以数组的长度,它的值的范围就是0——Array.length-1,此时取出的值为数组的下标.
            var num = parseInt(Math.random()*arrayTest.length);
    　　　　 //将arrayTest中的值取出,利用上面取出的下标num,此时取出的值为数组中真正的值,而不是它的下标
            var code = arrayTest[num];
            str += code;
    　　　　 //将上面取到的<span>元素通过innerHTML赋值code      
            $(this.random_code[i]).html(code);
    　　　　 //将随机出的值通过style.color赋予颜色,这里使用了自己写的一个封装函数randomColor()，
            $(this.random_code[i]).css("color",this.randomColor());
　　　   }
        this.form.attr("random-code",str);
    },
    randomColor : function(){
        var r = Math.round(Math.random()*255); 
        var g = Math.round(Math.random()*255); 
        var b = Math.round(Math.random()*255); 
        return `rgb(${r},${g},${b})`;
    },
    checkRandomVerCode : function(evt){
        var e = evt || window.event;
        var code = this.form.attr("random-code");    
        
        if(code !== this.input_vcode.val() && this.input_vcode.val() !== ""){
            console.log("验证码不通过");
            this.alert_danger.css("display","block");       
        }else{
            this.alert_danger.css("display","none");
            console.log("验证码通过");
            this.submitData();
        }              
    },
    submitData : function(){
        var userValue = this.login_name.val();
        var pwdValue  = this.login_password.val();
        // console.log(userValue,pwdValue);
        this.btn.attr("disabled","disabled");
        this.btn.html(this.btn.attr("data-loading-text"));
        
        var url = "http://localhost/js/test/konka/php/login.php";
        var data = {
            username : userValue,
            password : pwdValue
        }
        $.ajax(url,{
            data,
            type : "POST",
            dataType : "json"
        })
        .then($.proxy(function(res){
            console.log(res);
            switch(res.stateCode){
                case 0 : 
                    alert("服务器连接出错");
                    break;
                case 2 : 
                    alert("用户名不存在");
                    break;
                case 3 :
                    alert("密码错误");
                    break;
                case 1 :
                    alert("登录成功");
                    location.href = "http://localhost/js/test/konka/index.html";
                    break;
            }

            this.btn.attr("disabled",false);
            this.btn.html("登陆");

        },this));
    },
    submitForm : function(evt){
        var e = evt || window.event;
        e.preventDefault();
    },
    goBackRegister : function(){
        location.href = "http://localhost/js/test/konka/html/register.html";
    },
})
export default new Login();